<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家审核</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <el-form :model="searchInfo" status-icon :rules="rules" ref="searchInfo" label-width="100px"
                     class="demo-ruleForm">

            <el-select v-model="searchInfo.state" placeholder="请选择状态">
                <el-option>请选择状态</el-option>
                <el-option v-for="(s,i) in stateArr" :value="s.state" :lable="s.id"></el-option>
            </el-select>

            <el-select v-model="searchInfo.aname" placeholder="请选择区域">
                <el-option>请选择区域</el-option>
                <el-option v-for="(a,i) in areaArr" :value="a.aname" :lable="a.id"></el-option>
            </el-select>

            <el-select v-model="searchInfo.mname" placeholder="请选择市场">
                <el-option>请选择市场</el-option>
                <el-option v-for="(m,i) in marketArr" :value="m.mname" :lable="m.id"></el-option>
            </el-select>
                <el-input v-model="searchInfo.applicationdate" placeholder="申请日期"  type="date" style="display: inline-block; width: 200px;">
                </el-input>
                <el-button icon="el-icon-search" circle @click="searchBusiness()"></el-button>

            </el-form>
        </div>
    <el-table :data="businessCheckInfo" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="bname" label="店主姓名">
            </el-table-column>
            <el-table-column prop="telephone" label="手机号">
            </el-table-column>
            <el-table-column prop="area.aname" label="区域">
            </el-table-column>
            <el-table-column prop="market.mname" label="市场">
            </el-table-column>
            <el-table-column prop="store.sname" label="店铺名">
            </el-table-column>
            <el-table-column prop="businessCheckState.state" label="状态">
            </el-table-column>
            <el-table-column prop="checker" label="审核人">
            </el-table-column>
            <el-table-column prop="category.category" label="类别">
            </el-table-column>
            <el-table-column prop="applicationdate" label="申请时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showDetails(scope.row.id)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total=pageTotal>
        </el-pagination>
    </div>
<script>

    $.get("/cai/businessCheck/stateList",function (backData) {

        app.stateArr=backData.data;
    });
    $.get("/cai/businessCheck/areaList",function (backData) {
        app.areaArr=backData.data;
    });
    $.get("/cai/businessCheck/marketList",function (backData) {
        app.marketArr=backData.data;
    });

    var app=new Vue({
        el:"#app",
        data:{
            businessCheckInfo:[],
            stateArr:[],
            searchInfo:{},
            areaArr:[],
            marketArr:[],
            pageTotal:0
        },
        methods:{
            showDetails:function(id){
                window.location.href="/cai/showCheckDetails.html?id="+id;
            },
            searchBusiness:function () {
                getInfo(1,10);
            },
            handleCurrentChange: function(val) {
                getInfo(val, 10);
            }
        }
    });
    function getInfo(a,b) {
        app.searchInfo.pageNo=a;
        app.searchInfo.pageCount=b;
        $.post("/cai/businessCheck/list",app.searchInfo,function (backData) {
            app.businessCheckInfo=backData.data.currentPageData;
            app.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1,10);
</script>
</body>
</html>